<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="utf-8">
    <title>控制台主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/adminui/dist/css/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/style/custom.css}" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">我的待办</div>
                <div class="layui-card-body">
                    <div class="layui-btn-group" style="padding-bottom: 10px;">
                        <!--刷新table-->
                        <button type="button" class="layui-btn layui-btn-normal btn-op-task-incomplete layui-btn-sm" data-type="refresh">
                            <i class="layui-icon">&#xe666;</i>刷新
                        </button>
                    </div>

                    <!--table 定义-->
                    <table id="LAY-task-incomplete-table" lay-filter="LAY-task-incomplete-table"></table>

                    <!--列表操作项-->
                    <script type="text/html" id="task-incomplete-table">
<!--                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail"><i class="layui-icon layui-icon-list"></i>详情</a>-->
                        <a lay-event="detail" style="color: #1e9fff;">审批</a>
                    </script>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">我的已办</div>
                <div class="layui-card-body">
                    <div class="layui-btn-group" style="padding-bottom: 10px;">
                        <!--刷新table-->
                        <button type="button" class="layui-btn layui-btn-normal btn-op-task-completed layui-btn-sm" data-type="refresh">
                            <i class="layui-icon">&#xe666;</i>刷新
                        </button>
                    </div>

                    <!--table 定义-->
                    <table id="LAY-task-completed-table" lay-filter="LAY-task-completed-table"></table>

                    <!--列表操作项-->
                    <script type="text/html" id="task-completed-table">
<!--                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail"><i class="layui-icon layui-icon-list"></i>详情</a>-->
                        <a lay-event="detail" style="color: #1e9fff;">详情</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/'
    }).extend({
        //设定模块别名，模块名是使用layui.模块名  模块文件是 js名字。不设置模块名 = 模块文件名
        flying: 'flying'
    }).use(['index', 'flying'], function(){
        const $ = layui.$
            ,admin = layui.admin
            ,form = layui.form
            ,table = layui.table
            ,layer = layui.layer
            ,dropdown = layui.dropdown
            ,flying = layui.flying;

        flying.table({
            elem: '#LAY-task-incomplete-table',
            url: '/flow/instance/task/incomplete', //数据接口
            // lineStyle: 'height: 70px;',
            height: '366px',
            limit: 6,
            cols: [
                {type: 'numbers', fixed: 'left', title: '序号'}
                , {field: 'bizKey', title: '业务流水号', width: 180}
                , {field: 'name', title: '流程名称', minWidth: 150}
                , {field: 'startUserId', title: '发起人', width: 100}
                , {field: 'taskName', title: '当前节点', minWidth: 120, hide: true}
                , {field: 'createdTime', title: '创建时间', templet: '<div>{{ layui.util.toDateString(d.createdTime, "yyyy-MM-dd HH:mm:ss") }}</div>',  width: 160, sort: true}
                , {field: 'duration', title: '持续时间', templet: function (d) {
                        return flying.formatDuration(d.duration);
                    }, width: 180, hide: true}
                , {title: '操作', width: 40, align: 'center', fixed: 'right', toolbar: '#task-incomplete-table'}
            ]
        });

        //执行事件操作
        layui.$('.layui-btn.btn-op-task-incomplete').on('click', function () {
            //执行重载 数据刷新
            table.reload('LAY-task-incomplete-table');
        });

        //监听工具条
        table.on('tool(LAY-task-incomplete-table)', function (obj) {
            let line_data = obj.data;

            if (obj.event === 'detail') {
                // 查看详情
                layer.open({
                    type: 2
                    , title: '流程详情'
                    , content: '/flow/instance/turn/detail?processInstId=' + line_data.procInstId
                    , area: ['60%', '100%']
                    , resize: false
                    , btn: ['确认', '取消']
                    , btnAlign: 'r'
                    , maxmin: true
                    , offset: 'r'
                    , anim: 'slideLeft' // 从右往左
                    , yes: function (index, layero) {
                        layer.close(index);
                    }
                    , btn2: function (index, layero) {
                        layer.close(index);
                    }
                    , end: function () {
                        //数据刷新
                        table.reload('LAY-task-table');
                    }
                });
            }
        });

        flying.table({
            elem: '#LAY-task-completed-table',
            // url: '/flow/instance/task/completed/his', //数据接口
            url: '/flow/task/his/page', //数据接口
            height: '366px',
            limit: 6,
            cols: [
                {type: 'numbers', fixed: 'left', title: '序号'}
                , {field: 'bizKey', title: '业务流水号', width: 180}
                , {field: 'procInstName', title: '流程名称', minWidth: 150,}
                , {field: 'endTime', title: '结束时间', templet: '<div>{{ layui.util.toDateString(d.endTime, "yyyy-MM-dd HH:mm:ss") }}</div>',  width: 160, sort: true}
                , {field: 'result', title: '审批状态', templet: function (d) {
                        if (d.result === 'A') {
                            return '同意';
                        } else if (d.result === 'R') {
                            return '拒绝';
                        } else if (d.result === 'D') {
                            return '驳回';
                        } else if (d.result === 'W') {
                            return '委托';
                        } else {
                            return '未知';
                        }
                    }, width: 100}
                , {field: 'remark', title: '审批信息', width: 130, hide: true}
                , {title: '操作', width: 40, align: 'center', fixed: 'right', toolbar: '#task-completed-table'}
            ]
        });

        //执行事件操作
        layui.$('.layui-btn.btn-op-task-completed').on('click', function () {
            //执行重载 数据刷新
            table.reload('LAY-task-completed-table');
        });

        //监听工具条
        table.on('tool(LAY-task-completed-table)', function (obj) {
            let line_data = obj.data;

            if (obj.event === 'detail') {
                // 查看详情
                layer.open({
                    type: 2
                    , title: '流程详情'
                    , content: '/flow/instance/turn/detail?processInstId=' + line_data.procInstId
                    , area: ['60%', '100%']
                    , resize: false
                    , btn: ['确认', '取消']
                    , btnAlign: 'r'
                    , maxmin: true
                    , offset: 'r'
                    , anim: 'slideLeft' // 从右往左
                    , yes: function (index, layero) {
                        layer.close(index);
                    }
                    , btn2: function (index, layero) {
                        layer.close(index);
                    }
                    , end: function () {
                        //数据刷新
                        table.reload('LAY-task-completed-table');
                    }
                });
            }
        });
    });
</script>
</body>
</html>
